<template>
    <div class="dashboard-editor-container">
        <!-- <panel-group @handleSetLineChartData="handleSetLineChartData" /> -->

        <el-row :gutter="32">
            <!-- <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <raddar-chart />
        </div>
      </el-col> -->
            <el-col :span="12" class="card-box">
                <el-card>
                    <div slot="header"><span>车辆总数</span></div>
                    <div class="chart-wrapper">
                        <pie-chart style="height:600px" ref="carAllNum" />
                    </div>
                </el-card>
            </el-col>
            <el-col :span="12" class="card-box">
                <el-card>
                    <div slot="header"><span>车辆类型</span></div>
                    <div class="chart-wrapper">
                        <pie-chart style="height:600px" ref="carTypeNum" />
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <el-row :gutter="32">
            <el-col :span="12" class="card-box">
                <el-card>
                    <div slot="header"><span>现场车辆-数量</span></div>
                    <div class="chart-wrapper">
                        <pie-chart
                            style="width:100%;"
                            v-show="this.currCarAllNumPie.length != 0"
                            ref="currCarAllNum"
                        />
                        <!-- 无数据是 -->
                        <div
                            v-show="this.currCarAllNumPie.length == 0"
                            class="nulldata"
                        >
                            <img
                                src=""
                            />
                            <div>暂无数据</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="12" class="card-box">
                <el-card>
                    <div slot="header"><span>现场-车辆类型</span></div>
                    <div class="chart-wrapper">
                        <pie-chart
                            v-show="this.currCarTypeNumPie.length != 0"
                            ref="currCarTypeNum"
                        />
                        <!-- 无数据是 -->
                        <div
                            v-show="this.currCarTypeNumPie.length == 0"
                            class="nulldata"
                        >
                            <img
                                src=""
                            />
                            <div>暂无数据</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <el-row :gutter="32">
            <el-col :span="24" class="card-box">
                <el-card>
                    <div slot="header"><span>现场车辆趋势</span></div>
                    <el-date-picker
                        v-model="syncTime"
                        type="month"
                        value-format="yyyy-MM"
                        placeholder="请选择月份查询"
                        @change="this.carStatTrendList"
                        clearable
                    >
                    </el-date-picker>
                    <line-chart
                        v-show="this.carCurrLineY.length != 0"
                        ref="carCurrLine"
                    />
                    <!-- 无数据是 -->
                    <div
                        v-show="this.carCurrLineY.length == 0"
                        class="nulldata"
                    >
                        <img
                            src=""
                        />
                        <div>暂无数据</div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { carStatList, carStatTrendList } from "@/api/car/car"
import PanelGroup from '../../dashboard/PanelGroup'
import LineChart from '../../dashboard/LineChart'
import RaddarChart from '../../dashboard/RaddarChart'
import PieChart from '../../dashboard/PieChart'
import BarChart from '../../dashboard/BarChart'

const lineChartData = {
    newVisitis: {
        expectedData: [100, 120, 161, 134, 105, 160, 165],
        actualData: [120, 82, 91, 154, 162, 140, 145]
    },
    messages: {
        expectedData: [200, 192, 120, 144, 160, 130, 140],
        actualData: [180, 160, 151, 106, 145, 150, 130]
    },
    purchases: {
        expectedData: [80, 100, 121, 104, 105, 90, 100],
        actualData: [120, 90, 100, 138, 142, 130, 130]
    },
    shoppings: {
        expectedData: [130, 140, 141, 142, 145, 150, 160],
        actualData: [120, 82, 91, 154, 162, 140, 130]
    }
}

export default {
    name: 'Index',
    components: {
        PanelGroup,
        LineChart,
        RaddarChart,
        PieChart,
        BarChart
    },
    data () {
        return {
            lineChartData: lineChartData.newVisitis,
            carAllNumPie: [],
            carAllNumLine: [],
            carTypeNumPie: [],
            carTypeNumLine: [],
            currCarAllNumPie: [],
            currCarAllNumLine: [],
            currCarTypeNumPie: [],
            currCarTypeNumLine: [],
            carCurrLineX: [],
            carCurrLineY: [],
            carCurrBox: false,
            item: '',
            syncTime: this.getNowTime()
        }
    },
    created () {
        this.getCarList()
        this.carStatTrendList()
    },
    methods: {
        handleSetLineChartData (type) {
            this.lineChartData = lineChartData[type]
        },
        getCarList () {
            carStatList().then(response => {
                //console.log(response.data) 
                //车辆总数
                let carAllNums = response.data.carSumStat;
                carAllNums.forEach(item => {
                    this.carAllNumPie.push({
                        value: item.carCount,
                        name: item.statName
                    });
                    this.carAllNumLine.push(item.statName)
                });
                this.$refs.carAllNum.initChart(this.carAllNumLine, this.carAllNumPie);

                //车辆类型
                let carTypeNuData = response.data.carTypeStat;
                carTypeNuData.forEach(item => {
                    this.carTypeNumPie.push({
                        value: item.carCount,
                        name: item.statName
                    });
                    this.carTypeNumLine.push(item.statName)
                });
                this.$refs.carTypeNum.initChart(this.carTypeNumLine, this.carTypeNumPie);

                //现场车辆总数
                let carCurrSumStatData = response.data.carCurrSumStat;

                carCurrSumStatData.forEach(item => {
                    this.currCarAllNumPie.push({
                        value: item.carCount,
                        name: item.statName
                    });
                    this.currCarAllNumLine.push(item.statName)
                });

                //现场车辆类型
                let carCurrTypeStatData = response.data.carCurrTypeStat;
                carCurrTypeStatData.forEach(item => {
                    this.currCarTypeNumPie.push({
                        value: item.carCount,
                        name: item.statName
                    });
                    this.currCarTypeNumLine.push(item.statName)
                });
                this.$nextTick(() => {
                    this.$refs.currCarAllNum.initChart(this.currCarAllNumLine, this.currCarAllNumPie);
                    this.$refs.currCarTypeNum.initChart(this.currCarTypeNumLine, this.currCarTypeNumPie);
                })
            })
        },
        //现场车辆趋势
        carStatTrendList () {
            if (this.syncTime == null) {
                this.syncTime = this.getNowTime();
            }
            let queryParams = {
                queryMonth: this.syncTime
            }
            this.carCurrLineY = [];
            this.carCurrLineX = [];
            carStatTrendList(queryParams).then(response => {
                let carCurrLineData = response.data;
                if (response.data.length == 0) {
                    //无数据时
                    this.carCurrLineY.length = 0;
                    this.$nextTick(() => {
                        this.$refs.carCurrLine.initChart([], [], '车辆-数量');
                    })
                } else { //有数据时
                    //现场人员趋势图
                    carCurrLineData.forEach(item => {
                        this.carCurrLineY.push({
                            value: item.carCount
                        });
                    });
                    this.carCurrLineX = response.dateList
                    this.$nextTick(() => {
                        this.$refs.carCurrLine.initChart(this.carCurrLineY, this.carCurrLineX, '车辆-数量');
                    })
                }
            })
        },
        //处理默认选中当前日期
        getNowTime () {
            var now = new Date();
            var year = now.getFullYear(); //得到年份
            var month = now.getMonth(); //得到月份
            var date = now.getDate(); //得到日期
            var hour = " 00:00:00"; //默认时分秒 如果传给后台的格式为年月日时分秒，就需要加这个，如若不需要，此行可忽略
            month = month + 1;
            month = month.toString().padStart(2, "0");
            date = date.toString().padStart(2, "0");
            //    var defaultDate = `${year}-${month}-${date}${hour}`;
            var defaultDate = `${year}-${month}`;
            console.log(defaultDate)
            return defaultDate;
            this.$set(this.info, "stockDate", defaultDate);
        }
    }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;
    
    height: calc(100vh - 120px);
    min-height: 100%;
    overflow-y: auto;

    .chart-wrapper {
        background: #fff;
        padding: 16px 16px 0;
        margin-bottom: 32px;
    }
}

.nulldata {
    height: 300px;
    text-align: center;
    padding-top: 30px;
    color: #999;
}

@media (max-width: 1024px) {
    .chart-wrapper {
        padding: 8px;
    }
}
</style>
